<template>
  <div class="dialog-container">
    <el-dialog
      title="签名管理"
      :visible="dialogVisible"
      append-to-body
      width="500px"
      @opened="initData"
      @close="closeDialog"
    >
      <p>{{ signUrl && !canUpdate?'现有签名':'请设置新签名' }}</p>
      <div v-if="signUrl" style="margin-bottom: 10px;">
        <el-image style="width: 100%; height: 200px;" :src="staticImgUrl + signUrl" />
      </div>
      <div v-if="canUpdate" style="border: 1px solid #ddd;margin-bottom: 10px;">
        <vue-esign
          ref="esign"
          :width="500"
          :height="200"
          :line-width="1"
          line-color="#000"
          bg-color.sync="#eee"
        />
        <!-- :is-crop="isCrop" -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="canUpdate" :loading="saveLoading" size="mini" type="primary" @click="handleSave">保存</el-button>

        <el-button v-if="!canUpdate" size="mini" type="primary" @click="canUpdate = true">修改</el-button>
        <el-button v-if="canUpdate" size="mini" @click="clearData">清空</el-button>
        <el-button size="mini" @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fileUrl, staticImgUrl } from '@/url'
import axios from 'axios'
import { update } from '@/api/system/user'
export default {
  name: 'UpdatePasswordDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      staticImgUrl,
      canUpdate: false,
      dataForm: {
        oldPass: '',
        newPass: '',
        checkPass: ''
      },
      saveLoading: false,
      userId: null,
      signUrl: ''
    }
  },
  created() {},
  mounted() {},
  methods: {
    initData() {
      const info = this.$store.getters.user.info
      if (info) {
        let obj = info
        if (typeof info === 'string') {
          obj = JSON.parse(info)
        }
        this.userId = obj.id
        if (obj.signPath) {
          this.signUrl = obj.signPath
        } else {
          this.canUpdate = true
        }
        console.log('123', obj.signPath)
      }
    },
    handleSave() {
      if (!this.$refs.esign) return
      this.$refs.esign.generate().then(base64 => {
        console.log(base64)
        const filename = this.userId + '_' + new Date().getTime() + '.png'
        var formData = new FormData()
        var blobDate = this.convertBase64UrlToFile(base64, filename)
        formData.append('file', blobDate) // 文件对象
        axios.post(fileUrl, formData).then(res => {
          console.log(res)
          const data = res.data
          if (data.success) {
            const signUrl = data.data.url
            // 保存URL
            console.log(signUrl)
            update({ id: this.userId, signPath: signUrl }).then(() => {
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              this.$emit('closeDialog')
              this.clearData()
            }).catch(() => {
            })
          }
        })
      }).catch(() => {
        this.$message.warning('请先设置签名')
      })
    },
    // base64 转 文件
    convertBase64UrlToFile(urlData, filename) {
      var arr = urlData.split(','); var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
    clearData() {
      this.$refs.esign && this.$refs.esign.reset()
    },
    closeDialog() {
      this.$emit('closeDialog')
      this.clearData()
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
